<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="http://ironridge-events.googlecode.com/svn/trunk/jquery-ui-1.10.2.custom.css" rel="stylesheet">
	<script src="http://ironridge-events.googlecode.com/svn/trunk/jquery-1.9.1.js">								    </script>
	<script src="http://ironridge-events.googlecode.com/svn/trunk/jquery-ui-1.10.2.custom.js"></script>
<script>
	$(function() {
		
		$( "#accordion" ).accordion();
		

		

		

		

		

		

		

		

		// Hover states on the static widgets
		$( "#dialog-link, #icons li" ).hover(
			function() {
				$( this ).addClass( "ui-state-hover" );
			},
			function() {
				$( this ).removeClass( "ui-state-hover" );
			}
		);
	});
	</script>
	<style>
	.text{
		font-weight: normal;
	}
	body{
		margin: 50px;
		font-family: "Helvetica", sans-serif;
		font-size: 62.5%;
	}
	h3{
		font-weight: bold;	
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	</style>
</head>
<body>
<div id="accordion">
  <h3>MAY</h3>
	<div class="text">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	<h3>JUNE</h3>
	<div class="text">Phasellus mattis tincidunt nibh.</div>
	<h3>JULY</h3>
	<div class="text">Nam dui erat, auctor a, dignissim quis.</div>
</div>
<div class="ui-widget"></div>

</body>
</html>
